<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<div class="col-lg-12" style="margin-top:20px;">
	<div id="list-data"></div>
	<div id="lock-data"></div>
	<div id="edit-data"></div>
	<div id="add-data"></div>
</div>

<script id="list-template" type="text/html">
<p class="legend">
<a class="btn btn-primary btn-xs pull-right add-click" data='{"p":"<$= totalPages $>", "s": "<$= pageSize $>"}'><span class="glyphicon glyphicon-plus"></span>新建账号</a>
教师列表, 共<$= totalCount $>个
</p>
<table class="table">
   <thead>
     <tr>
         <th style="width:5%;">#</th>
         <th style="width:15%;">邮箱</th>
         <th style="width:10%;">昵称</th>
         <th style="width:15%;">联系信息</th>
         <th style="width:10%;">注册时间</th>
         <th style="width:10%;">最近登录</th>
         <th style="width:10%;">已创建赛程数量</th>
         <th style="width:10%;">赛程数量上限</th>
         <th style="width:5%;">状态</th>
         <th style="width:5%;"></th>
      </tr>
   </thead>
   <tbody>
   	 <$ for (var i = 0; i < result.length; i ++) { $>
     <tr>
       <td><a href="#"><$= result[i].id $></a></td>
       <td><a href="#"><$= result[i].loginName $></a></td>
       <td></td>
       <td><$= result[i].firstName $> <$= result[i].lastName $><br><$= result[i].phone $></td>
	   <td><$= result[i].registDate $></td>
	   <td><$= result[i].lastLoginDate $></td>
	   <td></td>
       <td>
       </td>
	   <td>
       	<c:forEach items="${statuses }" var="status">
			<$ if (result[i].status == '${status.code }'){ $>
				<span class="label label-<$= result[i].status $>">${status.name }</span>
			<$ } $>
		</c:forEach>
       </td>
       <td>
        <a class="lock-click" data='{"id":"<$= result[i].id $>", "name": "<$= result[i].loginName $>", "status": "<$= result[i].status $>"}' style="padding:0px;"><span class="glyphicon glyphicon-lock"></span>edit</a>
		<a class="del-click" data='{"id":"<$= result[i].id $>"}' ><span class="glyphicon glyphicon-trash"></span>del</a>
	   </td>
     </tr>
     <$ } $>
   </tbody>
 </table>
	<ul class="pagination pagination-sm">
		 <$ if (hasPre){ $>
               	<li><a data='{"p":"1", "s": "<$= pageSize $>"}'>&laquo;</a></li>
         <$}else{$>
                <li class="disabled"><a href="#">&laquo;</a></li>
         <$} $>
 
		<$ for (var i = 1; i <= totalPages; i ++) { $>
                <$ if (i == pageNo){ $>
                    <li class="active"><a data='{"p":"<$= i $>", "s": "<$= pageSize $>"}'><$= i $></a></li>
                <$}else{$>
                    <li><a data='{"p":"<$= i $>", "s": "<$= pageSize $>"}'><$= i $></a></li>
                <$} $>
        <$ } $>
	  
	  	 <$ if (hasNext){ $>
                <li><a data='{"p":"<$= totalPages $>", "s": "<$= pageSize $>"}'>&raquo;</a></li>
         <$}else{$>
                <li class="disabled"><a href="#">&raquo;</a></li>
         <$} $>

	</ul>
</script>

<script id="lock-template" type="text/html">
<div id="lock-modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">用户状态修改</h4>
        </div>
        <div class="modal-body">
          <form id="lock-form" class="form-horizontal" role="form">
			<input type="hidden" name="id" value="<$= id $>">
			<div class="form-group">
				<label for="inputEmail1" class="col-lg-4 control-label">邮箱</label>
				<div class="col-lg-4">
					<p class="form-control-static"><$= name $></p>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail1" class="col-lg-4 control-label">状态</label>
				<div class="col-lg-4">
					<c:forEach items="${statuses }" var="status">
	          			<label class="radio"><input name="status" type="radio" value="${status.code }" 
						<$ if (status == '${status.code }'){ $>
							checked
						<$ } $>
						> ${status.name }</label>
			  		</c:forEach>
				</div>
			</div>	
		</form>
        </div>
		<div class="modal-footer">
        	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
        	<button type="button" class="btn btn-primary btn-sm lock-submit">保存</button>
      	</div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</script>

<script id="edit-template" type="text/html">
<div id="edit-modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">赛程数量上限</h4>
        </div>
        <div class="modal-body">
          <form id="edit-form" class="form-horizontal" role="form">
			<input type="hidden" name="id" value="<$= id $>">
			<div class="form-group">
				<label for="inputEmail1" class="col-lg-4 control-label">邮箱</label>
				<div class="col-lg-4">
					<p class="form-control-static"><$= name $></p>
				</div>
			</div>
			<div class="form-group">
				<label for="inputEmail1" class="col-lg-4 control-label">数量上限</label>
				<div class="col-lg-4">
					<input name="course_num_limit" type="text" class="form-control" value="<$= metaValue $>">
				</div>
			</div>	
		  </form>
        </div>
		<div class="modal-footer">
        	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
        	<button type="button" class="btn btn-primary btn-sm edit-submit">保存</button>
      	</div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</script>

<script id="add-template" type="text/html">
<div id="add-modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">新建教师账号</h4>
        </div>
        <div class="modal-body">
          <form id="add-form" class="form-horizontal" role="form">
				<div class="form-group">
					<label for="loginName" class="col-lg-3 control-label">邮箱</label>
					<div class="col-lg-7">
						<input type="email" id="loginName" name="loginName" class="form-control required"/>
					</div>
				</div>
				<div class="form-group">
					<label for="firstName" class="col-lg-3 control-label">名字</label>
					<div class="col-lg-3">
						<input type="text" id="firstName" name="firstName" class="form-control required"/>
					</div>
				</div>
				<div class="form-group">
					<label for="lastName" class="col-lg-3 control-label">姓氏</label>
					<div class="col-lg-3">
						<input type="text" id="lastName" name="lastName" class="form-control required"/>
					</div>
				</div>
				<div class="form-group">
					<label for="plainPassword" class="col-lg-3 control-label">预置密码</label>
					<div class="col-lg-7">
						<input type="text" id="plainPassword" name="plainPassword" class="form-control required"/>
					</div>
				</div>
				<div class="form-group">
					<label for="courseNumLimit" class="col-lg-3 control-label">赛程数量上限</label>
					<div class="col-lg-3">
						<input type="text" id="course-num-limit" name="course_num_limit" class="form-control required" value="1"/>
					</div>
				</div>
				<div class="form-group">
					<label for="status" class="col-lg-3 control-label">状态</label>
					<div class="col-lg-7">
						<c:forEach items="${statuses }" var="status">
	          				<label class="radio-inline"><input name="status" type="radio" value="${status.code }"
								<c:if test="${status.code == 'locked' }">checked</c:if>
							> ${status.name }</label>
			  			</c:forEach>
					</div>
				</div>
		  </form>
        </div>
		<div class="modal-footer">
        	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
        	<button type="button" class="btn btn-primary btn-sm add-submit">保存</button>
      	</div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
</script>
<c:if test="${env == 'production' }">
	<script type="text/javascript">
		seajs.use("${ctx}/assets/js-dist/account/account-page");
	</script>
</c:if>
<c:if test="${env != 'production' }">
	<script type="text/javascript">
		seajs.use('${ctx}/assets/js/account/account-page');
	</script>
</c:if>	

